<script setup>
import { ref, watch } from 'vue'
import { useConfigStore } from "@/stores";
// import { useDidShow, useLoad, navigateTo } from '@tarojs/taro'
import TaskCard from "@/components/TaskCard";
import { activity } from '@/api/index' 
import { navigateTo } from '@/router'
import { debounce } from '@/utils/helper';
import "./talent.scss";

const props = defineProps({
    search: {
        type: String,
        default: "",
    }
})

const config = useConfigStore()
const listStatus = ref('loadmore');
const list = ref([])
let paging = { page: 1, size: 20 }
let total = 0

const goDetail = (id)=>{
  navigateTo({ url: '/pagesub/talent-detail/index', params: { id } })
}

function queryList(){
    let parame = {...paging, title: props.search||undefined, area: config.cityCode[config.cityCode.length-1]}
    activity(parame).then(res=>{
        if(res.meta){
            total = res.meta.last_page
        }
        if(res.data){
            list.value = list.value.concat(res.data)
        }
    })
}
const handleChange = () => {
  paging.page = 1;
  list.value = [];
  queryList()
}
// 监听参数变化
watch(()=> props.search, debounce(handleChange, 1000))
watch(()=> config.cityCode, ()=>{
    handleChange();
})
const loadMore = () => {
    if(paging.page >= total) return listStatus.value = 'nomore';
    listStatus.value = 'loading'
    if(paging.page < total){
        paging.page += 1;
        queryList()
    }
}

defineExpose({
  loadMore,
  handleChange
})
</script>
<template>
  <view class="content">
    <view class="list-box">
      <task-card v-for="item in list" :key="item.id" @toDes="goDetail" :item="item"></task-card>
      <template v-if="list.length>0">
          <nut-divider v-if="listStatus=='loading'">加载中...</nut-divider>
          <nut-divider v-else-if="listStatus=='nomore'">没有更多了</nut-divider>
      </template>
      <nut-empty description="暂无数据" v-else></nut-empty>
    </view>
  </view>
</template>
